@import '../../../styles/variables.less';
@import '../../../styles/mixin.less';

// 无商品场景
.order-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #EDEDED;

    >.user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 134px;
        padding: 20px 0;
        box-sizing: border-box;

        >.header-img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 0.5px solid @default-border;
            object-fit: cover;
        }

        >.seller-info {
            display: flex;
            align-items: center;
            height: 22px;
            padding-top: 8px;

            >.name {
                max-width: 300px;
                font-size: 16px;
                font-weight: 500;
                line-height: 22px;
                color: @label-color;
            }
        }
    }

    .pay-content {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        min-height: calc(100% - 134px);
        background-color: @white;
        border-radius: 10px 10px 0 0;

        .input-section {
            box-sizing: border-box;
            margin: 0 20px;

            .label {
                padding-top: 20px;
                font-size: 14px;
                line-height: 20px;
                font-weight: 500;
                color: @label-color;
            }

            .input-box {
                height: 44px;
                margin: 12px 0 20px;
            }
        }

        .content-box {
            padding: 0px 20px;
            position: relative;
            border-radius: 8px;
            flex: 1;

            .add-remark {
                position: absolute;
                bottom: 16px;
                left: 0;
                width: 100%;
                font-size: 14px;
                line-height: 20px;
                text-align: center;
                color: @blue;

                &:active {
                    opacity: 0.6;
                }
            }

            .cell-group {
                background: linear-gradient(270deg, #f6f6f6 0%, rgba(246, 246, 246, 0) 100%);
                border-radius: 8px;

                .activity-info {
                    border: none;
                    padding: 0 8px 0 0;
                }

                .note-cell {
                    height: 56px;
                    display: flex;
                    align-items: center;
                    padding: 0 8px 0 0;
                    color: @title-color;
                    background: linear-gradient(270deg, #f6f6f6 0%, rgba(246, 246, 246, 0) 100%);

                    :deep(.van-cell__title) {
                        margin: 0 16px 0 8px;
                        .ellipsis-one();
                    }

                    :deep(.van-cell__right-icon) {
                        color: @info-color;
                    }
                }

                .title {
                    font-size: 14px;
                    line-height: 20px;
                    color: @title-color;
                    .ellipsis-one();
                }

                .desc {
                    font-size: 12px;
                    line-height: 17px;
                    .ellipsis-one();
                }
            }
        }

        .footer-box {
            user-select: none;
            padding: 0 16px;
            margin-bottom: 16px;

            .key-confirm {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 52px;
                font-size: 17px;
                font-weight: 500;
                color: @white;
                border-radius: 10px;
                background-color: @primary-color;

                &:active {
                    opacity: 0.6;
                }
            }
        }
    }
}

// 有商品场景
.order-goods-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100%;
    background-color: #EDEDED;

    .header-bg {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 16px 16px;

        .address-info {
            display: flex;
            align-items: center;
            height: 84px;
            margin-bottom: 8px;
            background-color: @white;
            border-radius: 10px;

            :deep(.van-cell__title) {
                width: calc(100% - 160px);
            }

            .title {
                font-size: 12px;
                line-height: 17px;
                color: @label-color;
                .ellipsis-one();
                margin-right: 24px;
            }

            .detail {
                margin: 2px 24px 0 0;
                font-size: 14px;
                line-height: 22px;
                color: @label-color;
                font-weight: 500;
                .ellipsis-one();
            }

            .desc {
                font-size: 12px;
                line-height: 17px;
                color: @content-color;
                margin-right: 24px;
                .ellipsis-one();
            }
        }

        .order-goods {
            position: relative;
            background-color: @white;
            border-radius: 10px;

            .user-info {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 60px;
                padding: 12px 16px;
                border-bottom: 0.5px solid @border-color;

                .avatar {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    object-fit: cover;
                }

                .name {
                    flex: 1;
                    height: 20px;
                    margin-left: 8px;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 20px;
                    color: @label-color;
                }
            }

            .goods-info {
                padding: 6px 16px;

                .good-item {
                    display: flex;
                    align-items: flex-start;
                    padding: 6px 0;

                    .good-poster {
                        width: 90px;
                        height: 90px;
                        margin-right: 12px;
                        border-radius: 8px;
                        object-fit: cover;
                    }

                    .good-title {
                        flex: 1;
                        font-size: 14px;
                        line-height: 20px;
                        color: @label-color;
                        word-break: break-all;
                    }
                }
            }
        }

        .remark-box {
            padding-bottom: 136px;
            margin-top: 8px;
            font-size: 14px;
            line-height: 20px;
            color: @label-color;
            word-break: break-all;

            .add-remark {
                color: @blue;
            }
        }
    }

    .footer-box {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        user-select: none;
        padding-top: 24px;
        padding-bottom: calc(24px + constant(safe-area-inset-bottom)) !important;
        /* 兼容 iOS < 11.2 */
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        /* 兼容 iOS >= 11.2 */
        background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #F2F2F2 30%);

        .price-box {
            width: 100%;
            height: 40px;
            margin-bottom: 16px;
            text-align: center;
        }

        .key-confirm {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 180px;
            height: 40px;
            font-size: 17px;
            font-weight: 500;
            color: @white;
            border-radius: 8px;
            background-color: @primary-color;

            &:active {
                opacity: 0.6;
            }
        }
    }
}

.activity-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 16px;
    background: linear-gradient(90deg, rgba(7, 193, 96, 0) 0%, rgba(7, 193, 96, 0.12) 100%);
    border: 2px solid @white;
    border-radius: 10px;

    .left-box,
    .right-box {
        display: flex;
        align-items: center;
        font-size: 12px;
        height: 20px;
        line-height: 22px;
        color: @primary-color;
    }

    .left-box {
        margin-left: -2px;

        .buyer-img {
            margin-top: -2px;
            position: relative;
            width: 20px;
            height: 20px;
            border: 2px solid @white;
            border-radius: 50%;
        }

        >.time {
            margin-left: 4px;
        }
    }
}